{template 'common/header'}
<ul class="nav nav-tabs">
  <li {if $op == 'list'}class="active"{/if}>
     <a href="{php echo $this->createWebUrl('banner',array('op'=>'list'))}" >轮播图列表</a>
  </li>
  <li {if $op == 'post'}class="active"{/if}>
     <a href="{php echo $this->createWebUrl('banner',array('op'=>'post'))}" >{if empty($info['id'])}添加轮播图{else}修改轮播图{/if}</a>
  </li>

</ul>
<style type="text/css">
	.xh-toast-block{ min-width: 300px; position:fixed; z-index: 9999; font-size: 18px; color: #e7e7e7; padding: 10px 20px; background: rgba(0,0,0,0.7); left: 50%; top: 50%; line-height: 40px; border-radius: 10px; text-align: center; margin-top: -30px; margin-left: -150px; }
	.modeladd li{
		padding-top: 5px;
		padding-bottom: 5px;
		list-style: none;
		width: 100%;
		float: left;
	}
</style>
{if $op == 'list'}
<div>
	<table class="table table-hover table-bordered" style="margin-top:25px;width:98%;text-align:center;table-layout: fixed;" align="center">
		<tr>
			<th style="width: 40px;text-align:center;">
				{if $paixu == 2}
				<a href="{php echo $this->createWebUrl('banner',['op'=>'list','paixu'=>1])}">
					排序 <img src="{php echo MODULE_URL.'images/up.png'}" alt="" style="height: 14px;">
				</a>
				{elseif $paixu == 1}
				<a href="{php echo $this->createWebUrl('banner',['op'=>'list','paixu'=>2])}">
					排序 <img src="{php echo MODULE_URL.'images/down.png'}" alt="" style="height: 14px;">
				</a>
				{/if}
			</th>
			<!--<th style="width: 80px;text-align:center;">序号</th>-->
			<th style="width: 80px;text-align:center;">标题</th>
			<!-- <th style="width:15%">对应年级</th> -->
			<th style="width: 80px;text-align:center;">图片</th>
			<!--<th>发布位置</th>-->
			<th style="width: 80px;text-align:center;">跳转类型</th>
			<th style="width: 80px;text-align:center;">跳转链接</th>
			<th style="width: 80px;text-align:center;">状态</th>
			<th style="width: 80px;text-align:center;">操作</th>
		</tr>
		{loop $list $item}
		<tr>
			<td id="{$item['id']}" class="paixu">{$item['listorder']}</td>
			<!--<td>{$item['id']}</td>-->
			<td>{$item['title']}</td>
			<!-- <td>{$item['name']}</td> -->
			<td><img src="{php echo $_W['attachurl'].$item['image']}" style="width:120px"></td>
			<!--<td>{if $item['position'] == 1}小程序端{else}PC端{/if}</td>-->
			<td style="word-break:break-all;">{$item['typetitle']}</td>
			<td style="word-break:break-all;">{$item['link']}</td>
			<td>
				<div class="btn {if $item['status'] == 0}btn-danger{else}btn-info{/if}" data="{$item['id']}" onclick="changestatus(this)">{if $item['status'] == 0}不展示{else}已展示{/if}</div>
			</td>
			<td>
				<a href="{php echo $this->createWebUrl('banner',array('op'=>'post','id'=>$item['id']))}" class="btn btn-info">编辑</a>
				<a href="javascript:void(0)" onclick="del({$item['id']})" class="btn btn-danger">删除</a>
			</td>
		</tr>
		{/loop}
	</table>
	<script type="text/javascript">
		function del(id){
			var id = id;
			$.ajax({
				type:'post',
				url:"{php echo $this->createWebUrl('banner',array('op'=>'delete'))}",
				data:{id:id},
				success:function(res){
					var res = JSON.parse(res);
					location.reload();
				}
			});
		}
		$(function(){
			$('.paixu').click(function(){
				if(!$(this).is('.input')){
					$(this).addClass('input').html('<input type="text" id="'+ $(this).attr("id") +'" style="width: 50px;" value="'+ $(this).text() +'" />').find('input').focus().blur(function(){
						var order=$(this).val();
						var id=$(this).attr("id");
						$.ajax({
							type: 'POST',
							url: "{php echo $this->createWebUrl('banner',array('op'=>'sort'))}",
							data: {id:id,listorder:order},
							success:function(res){
								var res = JSON.parse(res);
								location.reload();
							}
						});
						$(this).parent().removeClass('input').html($(this).val() || 0);
					});
				}
			}).hover(function(){
				$(this).addClass('hover');
			},function(){
				$(this).removeClass('hover');
			});


		});
	</script>
	<script type="text/javascript">
      	function changestatus(obj){
      		var obj = $(obj);
      		var id = obj.attr('data');
      		if(obj.hasClass('btn-danger')){
      			var sta = 1;
      		}else{
      			var sta = 0;
      		}
      		$.ajax({
      			type:'post',
      			url:"{php echo $this->createWebUrl('banner',array('op'=>'changestatus'))}",
      			data:{id:id,sta:sta},
      			success:function(res){
      				var res = JSON.parse(res);
      				if(res.success == 1){
      					if(sta == 1){
      						obj.removeClass('btn-danger');
      						obj.addClass('btn-info');
      						obj.html('已展示');
      					}else{
      						obj.removeClass('btn-info');
      						obj.addClass('btn-danger');
      						obj.html('不展示');
      					}
      				}else{
      					alert(res.mess);
      				}
      			}
      		});
      	}
      </script>
</div>
{elseif $op == 'post'}
	<div class="list-group">
		<p href="#" class="list-group-item active" style="background-color: #D9EDF7;border:1px solid #D9EDF7;color:#31708F">轮播图设置</p>
		<div active="list-group-item " style="border:1px solid #cecece">
			<form action="" method="post" class="form-horizontal" style="padding:0 150px 0 50px;">
				<div class="form-group" style="margin-top:25px">
					<label  class="col-sm-2 control-label" >标题</label>
					<div class="col-sm-10">
						<input type="text"  name="title" value="{$info['title']}"  class="form-control" style="width:98%"/>
						<span class="help-block">轮播图标题</span>
					</div>
				</div>
				<div class="form-group" style="margin-top:25px">
					<label  class="col-sm-2 control-label">排序</label>
					<div class="col-sm-10">
						<input type="number" name="listorder" value="{if empty($info['listorder'])}0{else}{$info['listorder']}{/if}"  class="form-control" style="width:98%"/>
						<span class="help-block">数字越大排序越靠前</span>
					</div>
				</div>

				<div class="form-group" style="margin-top:25px">
					<label class="col-sm-2 control-label">状态</label>
					<div class="col-sm-10">
						<label class="radio-inline">
                           <input type="radio" name="status" {if $info['status'] == 0}checked{/if} value="0" title="不显示"> 不显示
                        </label>
                        <label class="radio-inline">
                           <input type="radio" name="status" {if $info['status'] == 1}checked{/if} value="1" title="显示" > 显示
                        </label>
						<span class="help-block">若不选择，默认不显示</span>
					</div>
				</div>

				<div class="form-group" style="margin-top:25px;display: none;">
					<label class="col-sm-2 control-label">选择发布位置：</label>
					<div class="col-sm-10">
						<label class="radio-inline">
							<input type="radio" name="position" {if $info['position'] == 1 || empty($info['id'])}checked{/if} value="1" title="小程序端" > 小程序端
						</label>
						<label class="radio-inline">
							<input type="radio" name="position" {if $info['position'] == 2}checked{/if} value="2" title="PC端"> PC端
						</label>
						<span class="help-block">若不选择，默认发布至小程序</span>
					</div>
				</div>

				<div class="form-group" style="margin-top:25px">
					<label  class="col-sm-2 control-label" ><span style="color:red">*</span>图片</label>
					<div class="col-sm-10" style="width:82%">
						{php echo tpl_form_field_image('image',$info['image'])}
						<span class="help-block">小程序轮播图图片大小:710*300；PC轮播图图片大小：<span style="color:darkred">1920*400</span></span>
					</div>
				</div>

				<!--<div class="form-group" style="margin-top:25px">
					<label  class="col-sm-2 control-label"><span style="color:red">*</span>选择年级</label>
					<div class="col-sm-10" id="class">
						{loop $classlist $row}
						<label class="radio-inline">
							<input type="radio" name="classid" value="{$row['id']}" {if $info['classid']}selected{/if}> <span style="margin-right:15px">{$row['name']}</span></label>
						{/loop}
						<span class="help-block">轮播图适应于年级</span>
					</div>
				</div>-->
				<div class="form-group" style="margin-top:25px">
					<label  class="col-sm-2 control-label"><span style="color:red">*</span>选择年级</label>
					<div class="col-sm-10" id="class">
						{loop $classlist $row}
						<label class="radio-inline">
							<input type="checkbox" name="classid[]" value="{$row['id']}" {if in_array($row['id'],$info['classid'])}checked{/if}> <span style="margin-right:15px">{$row['name']}</span></label>
						{/loop}
						<span class="help-block">轮播图适应于年级</span>
					</div>
				</div>

				<div class="form-group" style="margin-top:25px">
					<label class="col-sm-2 control-label"><span style="color:red">*</span>跳转类型</label>
					<div class="col-sm-10">
						<select  name="type"  style="width:98%">
							<option value="">--请选择跳转类型--</option>
							<option value="1" {if $info['type'] == 1}selected{/if}>外部链接跳转</option>
							<option value="2" {if $info['type'] == 2}selected{/if}>内部跳转到课程</option>
							<option value="3" {if $info['type'] == 3}selected{/if}>内部跳转到排行榜</option>
						</select>
						<span class="help-block">点击轮播图跳转位置</span>
					</div>
				</div>

				<div class="form-group" style="margin-top:25px">
					<label  class="col-sm-2 control-label"><span style="color:red">*</span>跳转参数</label>
					<div class="col-sm-10">
						<input type="text" name="link" value="{$info['link']}"  class="form-control" style="width:98%"/>
						<span class="help-block">外部跳转请填写完整的链接路径；内部跳转到课程以请填写课程id；跳转到排行榜请填写 -1</span>
					</div>
				</div>
				<input type="hidden" name="id" value="{$info['id']}">
				<input type="hidden" name="token" value="{$_W['token']}">
				<div style="float: right;margin:10px">
					<input type="submit" name="submit" value="保存设置" class="btn btn-info" onclick="return check();">
				</div>
				<div style="clear: both;"></div>
			</form>
		</div>
	</div>
<script>
	function check(){
	    var flag = true;
		if($('input[name="image"]').val() == ''){
			flag = false;
            xhToast('请选择轮播图图片');
			return flag;
		}
	    return flag;
	}
    //公用提示窗
    function xhToast(_text){
        $('body').append("<div class='xh-toast-block'>"+_text+"</div>");
        setTimeout(function(){
            $('.xh-toast-block').remove();
        },2000);
    }
</script>
{/if}
{template 'common/footer'}